<template>
  <view class="picker-mask" v-show="isShowPicker" @click="cancelPicker">
    <view class="picker-box" @click.stop>
      <view class="picker-head">
        {{ year }}年{{ month }}月{{ day }}日{{ week }}
      </view>
      <picker-view
        v-if="visible"
        :indicator-style="indicatorStyle"
        :value="value"
        @change="bindChange"
      >
        <picker-view-column>
          <view
            class="item"
            v-for="(item, index) in monthAndDay"
            :key="index"
            :class="{ 'picker-active': value[0] == index }"
          >
            {{ item.sum }}
          </view>
        </picker-view-column>
        <picker-view-column>
          <view
            class="item"
            v-for="(item, index) in period"
            :key="index"
            :class="{ 'picker-active': value[1] == index }"
          >
            {{ item }}
          </view>
        </picker-view-column>
        <picker-view-column>
          <view
            class="item"
            v-for="(hours, index) in hours"
            :key="index"
            :class="{ 'picker-active': value[2] == index }"
          >
            {{ hours }}
          </view>
        </picker-view-column>
        <picker-view-column>
          <view
            class="item"
            v-for="(minutes, index) in minutes"
            :key="index"
            :class="{ 'picker-active': value[3] == index }"
          >
            {{ minutes }}
          </view>
        </picker-view-column>
      </picker-view>
      <view class="picker-foot">
        <span @click="cancelPicker">取消</span>
        <span @click="getPicker">确定</span>
      </view>
    </view>
  </view>
</template>

<script>
const { format } = require("../../utils/utils");

export default {
  props: {
    isShowPicker: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    const date = new Date();
    // const years = [];
    const year = date.getFullYear();
    const months = [];
    const month = date.getMonth() + 1;
    // const days = [];
    const day = date.getDate();
    const week = [
      "星期日",
      "星期一",
      "星期二",
      "星期三",
      "星期四",
      "星期五",
      "星期六",
    ][date.getDay()];
    const hours = [];
    const minutes = [];

    // for (let i = 1990; i <= date.getFullYear(); i++) {
    //   years.push(i);
    // }

    for (let i = 1; i <= 12; i++) {
      months.push(i);
    }

    for (let i = 0; i <= 23; i++) {
      let num = ("0" + i).slice(-2);
      hours.push(num);
    }

    for (let i = 0; i <= 59; i++) {
      let num = ("0" + i).slice(-2);
      minutes.push(num);
    }

    return {
      // years,
      year,
      months,
      month,
      // days,
      day,
      week,
      hours,
      minutes,
      value: [],
      monthAndDay: [],
      period: ["上午", "下午"],
      /**
       * 解决动态设置indicator-style不生效的问题
       */
      visible: true,
      // indicatorStyle: `height: ${Math.round(uni.getSystemInfoSync().screenWidth/(750/100))}px;`
      indicatorStyle: `height: 50px;`,
    };
  },
  created() {
    this.getMonthAndDay();
  },
  methods: {
    bindChange(e) {
      const val = e.detail.value;
      this.value = val;
    },
    // 默认选中当前时间
    getMonthAndDay() {
      let newDate;
      let d;

      // 获取第一列的数据
      for (let i = 1; i <= this.months.length; i++) {
        newDate = new Date(this.year, i - 1, 32); // 根据月份设置日期
        d = 32 - newDate.getDate(); // 根据设置的日期来获取当前月份的天数。
        for (let j = 1; j <= d; j++) {
          let monthAndDay = {
            month: i,
            day: j,
            sum: i + "月" + j + "日",
          };
          this.monthAndDay.push(monthAndDay);
        }
      }

      // 从第一列的数据中查找当前日期的索引
      const currentDays = this.monthAndDay.findIndex(item => {
        return item.sum == this.month + "月" + this.day + "日";
      });

      const date = new Date();
      const currentHours = date.getHours();
      const currentMinutes = date.getMinutes();
      const currentPeriod = currentHours > 12 ? 1 : 0;

      // 需要延迟一些时间再设置 value 才有效
      setTimeout(() => {
        this.value = [currentDays, currentPeriod, currentHours, currentMinutes];
      }, 30);
    },
    cancelPicker() {
      this.$emit("cancelPicker");
    },
    getPicker() {
      let pickerValue = {
        year: this.year,
        monthAndDay: this.monthAndDay[this.value[0]],
        period: this.period[this.value[1]],
        hours: this.hours[this.value[2]],
        minutes: this.minutes[this.value[3]],
      };

      // 选中的时间格式
      pickerValue.timeValue =
        pickerValue.year +
        "-" +
        pickerValue.monthAndDay.month +
        "-" +
        pickerValue.monthAndDay.day +
        " " +
        pickerValue.hours +
        ":" +
        pickerValue.minutes +
        ":00";
      // 格式转换
      pickerValue.timeValue = format(
        pickerValue.timeValue,
        "yyyy-MM-dd hh:mm:ss"
      );
      this.$emit("getPicker", pickerValue);
    },
  },
};
</script>

<style lang="scss" scoped>
.picker-mask {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  z-index: 9;

  .picker-box {
    position: absolute;
    left: 4%;
    bottom: 4%;
    width: 92%;
    height: 45%;
    padding: 30rpx;
    background-color: #fff;
    border-radius: 8rpx;
    color: #333;
    font-size: 28rpx;
    z-index: 10;

    .picker-head {
      height: 10%;
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
    }

    picker-view {
      width: 100%;
      height: 80%;

      .item {
        line-height: 100rpx;
        text-align: center;
      }
    }

    .picker-foot {
      position: relative;
      height: 10%;

      &::before {
        content: "";
        position: absolute;
        top: 2rpx;
        left: 50%;
        width: 2rpx;
        height: 48rpx;
        background-color: #cccccc;
        transform: translateX(-50%);
      }

      & span {
        display: inline-block;
        width: 50%;
        height: 52rpx;
        line-height: 52rpx;
        text-align: center;
        font-size: 28rpx;
        color: #999999;
      }

      & span:last-child {
        color: #666ee8;
      }
    }
  }

  .picker-active {
    color: #666ee8;
  }
}
</style>
